<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="props.rules"
    label-width="210"
    label-position="left">
    <slot
      name="content"
      :formData="formData"
      :controlLine=controlLine
    />
    <el-row style="max-width: 600px;display: flex; justify-content: end">
      <el-button
        type="primary"
        :loading="loading"
        @click="handleSubmit"
      >确 定
      </el-button>
      <el-button @click="getData">取 消</el-button>
    </el-row>
  </el-form>
</template>
<script setup lang="ts">

import request from "@/utils/request";

defineOptions({
  name: "PCMPCMSPECIALRULECOMMONCOMMON"
})

const loading = ref<boolean>(false);
const formRef = ref();

const controlLine = reactive({
  hasUp: false,
  hasDown: false
})

function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      if (!controlLine.hasUp) formData.upLine = 0;
      if (!controlLine.hasDown) formData.downLine = 0;
      await request({
        url: `/dmpDosPcm/${props.baseUrl}/save`,
        method: "post",
        data: formData
      }).then(async () => {
        loading.value = false;
        ElMessage.success("修改成功");
        await getData();
      }).catch(() => {
        loading.value = false;
      })
    } else {
      ElMessage.error("红色框内请输入五位以内正整数");
    }
  });

}

const props = defineProps({
  baseUrl: {
    type: String,
    required: true
  },
  rules: {
    type: Object,
    required: true
  },
})

const getData = async () => {
  Object.assign(formData, {
    id: null,
    sampleNum: null,
    isWarn: null,
    controlRate: null,
    groupingNum: null,
    upLine: null,
    downLine: null,
  })
  const {data: [first]} = await request({
    url: `/dmpDosPcm/${props.baseUrl}/list`,
    method: "get",
  });
  Object.assign(formData, first)
}

onMounted(async () => {
  await getData();
})

const formData = reactive<FormData>({})


watch(() => formData.upLine, (val: any) => {
  controlLine.hasUp = val !== undefined && val !== null && val !== "" && val !== 0;
})
watch(() => formData.downLine, (val: any) => {
  controlLine.hasDown = val !== undefined && val !== null && val !== "" && val !== 0;
})

type FormData = {
  id?: string,
  sampleNum?: number,
  isWarn?: number,
  controlRate?: number,
  groupingNum?: number,
  upLine?: number,
  downLine?: number,
  checkHour?: number,
  updateHour?: number,
  escalateStopover?: number,
}
</script>

<style scoped lang="scss">
</style>
